import Callout from 'components/Callout';
import {Card, Cards} from 'nextra-theme-docs';
import {ChatBubbleBottomCenterTextIcon} from '@heroicons/react/24/outline';

# Usage guide

This guide explains how `next-intl` can be used in React components.

Note that while it might be helpful to get an overview of the capabilities of `next-intl`, you don't have to read the whole usage guide upfront. Rather, you can come back to it as necessary.

Let's get started:

<Cards num={2}>
  <Card
    arrow
    icon={<ChatBubbleBottomCenterTextIcon />}
    title="Render messages in components"
    href="/docs/usage/messages"
  />
</Cards>

If you prefer a more hands-on approach to learning, you can alternatively explore these example apps:

- [App Router example](/examples#app-router)
- [Pages Router example](/examples#pages-router)
